<template>
  <div id="app">
    <router-view
      v-if="isRouterAlive"
      v-loading.fullscreen.lock="loading"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      :element-loading-background="loadingBgColor"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getGlobalUserName } from '@/util/auth';
export default {
  name: 'app',
  data() {
    return {
      isConfirmShow: false,
      isRouterAlive: true,
      loading: false,
      loadingText: '文件下载中，请稍后...',
      loadingBgColor: ''
    };
  },
  provide() {
    return {
      reload: this.reload,
      globalStartLoad: this.startLoad,
      globalEndLoad: this.endLoad
    };
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.userName
    })
  },
  mounted() {
    document.addEventListener('visibilitychange', this.checkNameExpired);
  },
  beforeDestroy() {
    document.removeEventListener('visibilitychange', this.checkNameExpired);
  },
  methods: {
    checkNameExpired() {
      const userName_cookie = getGlobalUserName();
      if (userName_cookie && this.userName !== userName_cookie && !this.isConfirmShow) {
        this.isConfirmShow = true;
        this.$alert(`用户${userName_cookie}已登录，上一用户已强制退出，请点击 “确定” 刷新本页面。`, '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: () => {
            window.location.reload();
            this.isConfirmShow = false;
          }
        });
      }
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    startLoad(text, bgColor) {
      this.loadingText = text;
      this.loadingBgColor = bgColor || 'rgba(0, 0, 0, 0.8)';
      this.loading = true;
    },
    endLoad() {
      this.loading = false;
    }
  }
};
</script>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.avue--detail .el-col {
  margin-bottom: 0;
}
.avue-form__group .el-col {
  margin-bottom: 0 !important;
}
.dmptyFormButton {
  .avue-form__menu {
    padding: 0;
    height: 0;
  }
}
.mzindex {
  z-index: 9999 !important;
}
.text-green {
  color: #4caf50;
}
.text-red {
  color: #f44336;
}
.text-yellow {
  color: #ff9800;
}
.el-input {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}
.el-form-item__label {
  height: 32px;
  line-height: 32px;
}
.el-select {
  .el-input__icon {
    line-height: 32px;
  }
}
.el-input {
  .el-input__icon {
    line-height: 32px;
  }
}
.avue--detail {
  .el-input-group__append {
    display: none;
  }
}
.el-dialog__header,
.el-dialog__footer {
  border-bottom: 1px solid #f0f0f0;
}
.informationLabel {
  .el-tabs__item {
    color: #606266 !important;
    font-weight: bold;
  }
  .el-form-item__content {
    line-height: 32px;
  }
}
.dangerTag {
  background-color: #a57275;
  color: #ffffff;
  border-color: #a57275;
}
.successTag {
  background-color: #6ea877;
  color: #ffffff;
  border-color: #6ea877;
}
.el-card .is-never-shadow {
  padding: 10px;
}
.el-card__body__padding {
  padding: 0;
}
.el-textarea.is-disabled .el-textarea__inner {
  color: #606266;
}
.el-table__body {
  .el-tag {
    height: 25px;
    line-height: 23px;
    padding: 0 6px;
  }
  td {
    padding: 4px 0;
    .el-button {
      padding: 4px 0;
    }
  }
}
.el-message-box__message {
  max-height: 500px;
  overflow: auto;
}
</style>
